<template>
  <div class="tw-main">
    <div class="screen" >

      <el-row>
        <!-- <el-col :span="24">
          <el-row class="tw-grid">
            <el-col :lg="24" :span="24" class="tw-grid__left">
              <div style="display:flex; width:100%;">
                <div class="tw-new-title" style="text-align: right;width:300px;">
                  <div style="margin-top:32px;font-size:24px;color:#bad3ff">嘉兴市学校总数 </div>
                  <div style="margin-top:10px;font-size:32px;color:#bad3ff"><span class="digi">{{schoolSumNum}}</span><span style="font-size:24px">所</span></div>
                </div>
                <div ref="echarts_educationZoneSituation" style="width:100%;height:184px"></div>
                <div style="width:100px">&nbsp;</div>
              </div>
            </el-col>
          </el-row>
        </el-col> -->
        <el-col :span="18">
          <el-row class="tw-grid">
            <el-col :lg="8" :span="8" class="tw-grid__left" style="padding-right:0">
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  mb='20px'
                  :label="'学校'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/moneLie.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption1.chartOption"
                    :dataset="baroption1.dataset"
                    :chartDataMaps="baroption1.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  mb='20px'
                  :label="'占地及绿化用地'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/lvyongd.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption2.chartOption"
                    :dataset="baroption2.dataset"
                    :chartDataMaps="baroption2.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  :label="'教学班'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/teachClass.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption3.chartOption"
                    :dataset="baroption3.dataset"
                    :chartDataMaps="baroption3.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
            </el-col>
            <el-col :lg="16" :span="16" class="tw-grid__right" style="padding:0">
              <tw-midhead widthHead='670px' :schoolNumSum="schoolNumSum" :stuNumSum="stuNumSum" :teaNumSum="teaNumSum"></tw-midhead>
              <tw-card class="has-no-bg"
                  widthCard='960px' >
                <TwMap :clickDown="false"   :isShowFlag="true" :mapWidth="'956px'" :mapHeight="'730px'" :styleMpId="'156ea3f72333dcd2b3facdabc673504a'"></TwMap>
              </tw-card>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" style="padding-right: 20px">
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  mb='20px'
                  :label="'学生'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/student.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption4.chartOption"
                    :dataset="baroption4.dataset"
                    :chartDataMaps="baroption4.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  mb='20px'
                  :label="'专任教师'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/teachws.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption5.chartOption"
                    :dataset="baroption5.dataset"
                    :chartDataMaps="baroption5.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  :label="'生师比'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/ssbPiut.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption6.chartOption"
                    :dataset="baroption6.dataset"
                    :chartDataMaps="baroption6.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import echarts from 'echarts'
import TwCard from '@/components/TwCard.vue'
import TwEcharts from '@/components/TwEcharts.vue'
import TwBubble from '@/components/TwBubble.vue'
import TwTable from '@/components/TwTable.vue'
import TwItemInfo from '@/components/TwItemInfo.vue'
import TwOldChart from '@/components/TwOldChart.vue'
import cookieUtils from '@/config/cookieUtils'
import TwChart from '@/components/TwChart.vue'
import TwMap from '@/components/tw-map/TwMap.vue'
import twMidhead from '@/components/tw-midhead/tw-midhead.vue'

export default{
  props: [],
  components: {
    TwCard,
    TwEcharts,
    TwBubble,
    TwTable,
    TwItemInfo,
    TwOldChart,
    TwChart,
    cookieUtils,
    TwMap,
    twMidhead
  },
  data () {
    return {
      tjnf:2019,
      schoolNumSum:0,
      stuNumSum:0,
      teaNumSum:0,
      line: {
        chartOption: {
          color: ['#1890fe', '#00e1f9', '#ffe983', '#85e2b6', '#7e75f6', '#f96c7c'],
          tooltip: {
            show: true,
            trigger: 'item',
            axisPointer: {
              // type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            show: true,
            top: 0,
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            top: '20%',
            left: '3%',
            right: '3%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              fontSize: 16,
              interval: 0
            },
            data: []
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                fontSize: 16
              },
              splitLine: {
                opacity: 0.12
              },
              axisLine: {
                // lineStyle: '#fff'
              }
            }
          ],
          series: []
        },
        chartDataMaps: [],
        dataset: []
      },
      baroption1:{},
      baroption2: {},
      baroption3: {},
      baroption4: {},
      baroption5: {},
      baroption6: {},
      pie: {
        chartOption: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '',
              type: 'pie',
              // roseType: 'area',
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  textStyle: {
                    fontSize: 16
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }
          ]
        },
        dataset: [],
        chartDataMaps: []
      },
    }
  },
  created () {
    this.baroption1 = JSON.parse(JSON.stringify(this.line))
    this.baroption2 = JSON.parse(JSON.stringify(this.line))
    this.baroption3 = JSON.parse(JSON.stringify(this.line))
    this.baroption4 = JSON.parse(JSON.stringify(this.pie))
    this.baroption5 = JSON.parse(JSON.stringify(this.pie))
    this.baroption6 = JSON.parse(JSON.stringify(this.line))

  },
  mounted(){

    // 学校
    this.baroption1Init()

    // 占地及绿化用地
    this.baroption2Init()

    // 教学班
    this.baroption3Init()

    // 学生
    this.baroption4Init()

    // 专任教师
    this.baroption5Init()

    // 生师比
    this.baroption6Init()
  },
  methods: {
    // 数组对象排序
    sortData (a, b) {
      return b.yhsl - a.yhsl
    },


    // 学校
    baroption1Init () {
      let vm=this
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = [{ 'fieldName': 'tjnf', 'fieldValues': [this.tjnf], 'operator': 'IN', 'prepender': 'AND' }]
      quary.conditions = timeSectionValue
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_sy_qyxxsltj`, quary).then(res=>{
        let {pageInfo, serverResult} = res.data
        if(serverResult.resultCode === '200'&&pageInfo.list.length>0){
          // 图表处理
          let toolTip = this.baroption1.chartOption.tooltip
          let xAxis = this.baroption1.chartOption.xAxis
          let colorsList = this.baroption1.chartOption.color
          let yAxis = this.baroption1.chartOption.yAxis
          let legend = this.baroption1.chartOption.legend // 控制 图例的显示
          colorsList[0]='#00e2fe'
          legend.show = false
          yAxis[0].type = 'value'
          xAxis.axisLabel = {
            fontSize: 14,
            interval: 0,
            rotate: 0
          }
          toolTip.formatter = function (datas) {
            var res = datas.marker + datas.name + ': '+ datas.value +'所'
            return res
          }

          // 数据处理
          let schoolNumSum=0 // 学校总数
          let chartDataMaps = [
            {
              'name': '学校数量',
              'dataKey': 'value'
          }]
          let dataSet=[{
            name:'幼儿园',
            value:0
          },{
            name:'小学',
            value:0
          },{
            name:'初中',
            value:0
          },{
            name:'高中',
            value:0
          }]
          pageInfo.list.forEach(el=>{
            schoolNumSum+=el.xxsl
            dataSet.forEach(item=>{
              if(el.jyjb===item.name){
                item.value+=el.xxsl
              }
            })
          })
          this.schoolNumSum=schoolNumSum
          this.baroption1.dataset = dataSet
          this.baroption1.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              },
              barMaxWidth: 22,
              label: {
                show: false,
                fontSize: 16,
                position: 'top'
              }
            }
          })
        }
      })
    },

    // 占地及绿化用地
    baroption2Init (tabName="总计") {
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = []
      timeSectionValue = [{ 'fieldName': 'jyjd', 'fieldValues': ['学前教育','小学教育','初中教育','普高教育'], 'operator': 'IN', 'prepender': 'AND' }]
      quary.conditions = timeSectionValue

      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_xxxx_xxzbxx`, quary).then(res=>{
        let {pageInfo, serverResult} = res.data
        if(serverResult.resultCode==='200'&&pageInfo.list.length>0){
          // 图表处理
          let toolTip = this.baroption2.chartOption.tooltip
          let xAxis = this.baroption2.chartOption.xAxis
          let yAxis = this.baroption2.chartOption.yAxis
          let legend = this.baroption2.chartOption.legend // 控制 图例的显示
          legend.show = true
          yAxis[0].type = 'value'
          xAxis.axisLabel = {
            fontSize: 14,
            interval: 0,
            rotate: 0
          }
          toolTip.formatter = function (datas) {
            var res = datas.seriesName+'<br/>'+datas.marker + datas.name+'：' + datas.value + '平方米'
            return res
          }
          // 数据处理
          let chartDataMaps = [
            {
              'name': '占地',
              'dataKey': 'value'
            },
            {
              'name': '绿化用地',
              'dataKey': 'value1'
            }]

          let dataSet=[{
            name:'幼儿园',
            labName:'学前教育',
            value:0,
            value1:0
          },{
            name:'小学',
            labName:'小学教育',
            value:0,
            value1:0
          },{
            name:'初中',
            labName:'初中教育',
            value:0,
            value1:0
          },{
            name:'高中',
            labName:'普高教育',
            value:0,
            value1:0
          }]
          pageInfo.list.forEach(el=>{
            dataSet.forEach(item=>{
              if(el.jyjd===item.labName){
                item.value=el.zdmj
                item.value1=el.lhydmj
              }
            })
          })
          this.baroption2.dataset = dataSet
          this.baroption2.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              },
              barMaxWidth: 20,
              label: {
                show: false,
                fontSize: 16,
                position: 'top'
              }
            }
          })

        }

      })



      // var newConditions = [{
      //   fieldName: 'tjnf',
      //   operator: 'IN',
      //   fieldValues: ['2019'],
      //   prepender: 'AND'
      // }]
      // if (tabName === '特殊') {
      //   newConditions = [{
      //     fieldName: 'tjnf',
      //     operator: 'IN',
      //     fieldValues: [this.tjnf],
      //     prepender: 'AND'
      //   }, {
      //     fieldName: 'jyjd',
      //     operator: 'IN',
      //     fieldValues: [tabName],
      //     prepender: 'AND'
      //   }]
      // }
      // this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jdjcjyssb`, {
      //   conditions: newConditions,
      //   orderMethods: [{
      //     'field': 'jyjd',
      //     'method': 'ASC'
      //   }]
      // }).then(resp => {
      //   let {pageInfo, serverResult} = resp.data
      //   if (serverResult.resultCode === '200') {
      //     // 点击时触发
      //     let toolTip = this.baroption2.chartOption.tooltip
      //     let xAxis = this.baroption2.chartOption.xAxis
      //     let yAxis = this.baroption2.chartOption.yAxis
      //     let legend = this.baroption2.chartOption.legend // 控制 图例的显示
      //     legend.show = true
      //     yAxis[0].type = 'value'
      //     xAxis.axisLabel = {
      //       fontSize: 14,
      //       interval: 0,
      //       rotate: 0
      //     }
      //     toolTip.formatter = function (datas) {
      //       var res = datas.marker + datas.name + datas.value + ': 1'
      //       return res
      //     }
      //     let testData = []
      //     let chartDataMaps = [
      //       {
      //         'name': '占地',
      //         'dataKey': 'value'
      //       },
      //       {
      //         'name': '绿化用地',
      //         'dataKey': 'value1'
      //       }]
      //     pageInfo.list.forEach(el => {
      //       testData.push({
      //         name: el.jyjd,
      //         value: 0,
      //         value1: 0
      //       })
      //     })
      //     testData = this.$getArrListByname(testData)
      //     console.log(testData)
      //     pageInfo.list.forEach(el => {
      //       testData.forEach(item => {
      //         if (el.jyjd === item.name) {
      //           let ssbl = el.ssbl || 0
      //           if (el.qy === '城') {
      //             item.value = (ssbl).toFixed(0) - 0
      //           } else if (el.qy === '镇') {
      //             item.value1 = (ssbl).toFixed(0) - 0
      //           }
      //         }
      //       })
      //     })

      //     let a = ['幼儿园', '小学', '初中', '高中', '中职', '特殊']
      //     let dataseta = []
      //     a.forEach((itm) => {
      //       let b = testData.filter(it => it.name === itm)
      //       let name = itm
      //       if (itm === '幼儿园') {
      //         name = '学前'
      //       } else if (itm === '高中') {
      //         name = '普高'
      //       } else if (itm === '特殊') {
      //         name = '特殊教育'
      //       }
      //       if (b.length > 0) {
      //         dataseta.push({
      //           name: name,
      //           value: b[0].value,
      //           value1: b[0].value1
      //         })
      //       } else {
      //         dataseta.push({
      //           name: name,
      //           value: 0,
      //           value1: 0
      //         })
      //       }
      //     })
      //     this.baroption2.dataset = dataseta
      //     this.baroption2.chartDataMaps = chartDataMaps.map((item, index) => {
      //       return {
      //         ...item,
      //         type: 'bar',
      //         itemStyle: {
      //           barBorderRadius: [5, 5, 0, 0]
      //         },
      //         barMaxWidth: 20,
      //         label: {
      //           show: false,
      //           fontSize: 16,
      //           position: 'top'
      //         }
      //       }
      //     })
      //   }
      // })
    },

    // 教学班
    baroption3Init () {
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = [{ 'fieldName': 'tjnf', 'fieldValues': [this.tjnf], 'operator': 'IN', 'prepender': 'AND' }]
      quary.conditions = timeSectionValue
      this.$axios.post(`/tw-cloud-datatheme-server/customthemedata/app_sy_jxbtj`, quary).then(res=>{
        let {pageInfo, serverResult} = res.data
        if(serverResult.resultCode==='200'&&pageInfo.list.length>0){

          // 图表处理
          let colorList = this.baroption3.chartOption
          colorList.color = ['#1a8fff', '#ffea7f', '#ffea81', '#83e6b7', '#10caa3', '#4b6aff', '#7e75f6', '#f96c7c']

          // let toolTip = this.baroption3.chartOption.tooltip
          // toolTip.formatter = function (params) {
          //   var res = ''
          //   res+=params.seriesName+'<br/>'+params.marker+params.name+'：'+params.value
          //   return res
          // }
          // 数据处理
          let chartDataMaps = [
            {
              'name': '标准班',
              'dataKey': 'value1'
            },
            {
              'name': '大额班',
              'dataKey': 'value2'
          }]
          let dataSet=[{
            name:'小学',
            value1:0,
            value2:0
          },{
            name:'初中',
            value1:0,
            value2:0
          },{
            name:'高中',
            value1:0,
            value2:0
          }]
          pageInfo.list.forEach(el=>{
            dataSet.forEach(item=>{
              if(el.tjnf==='2019'&&el.jyjd===item.name){
                item.value1=el.fdbes
                item.value2=el.dbes
              }
            })
          })

          this.baroption3.dataset = dataSet
          this.baroption3.chartDataMaps = chartDataMaps.map((item, index) => {
              return {
                ...item,
                type: 'bar',
                stack: 'bar',
                barMaxWidth: 22
              }
          })
        }
      })

    },



    // 学生
    baroption4Init () {
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = [{ 'fieldName': 'tjnf', 'fieldValues': [this.tjnf], 'operator': 'IN', 'prepender': 'AND' }]
      quary.conditions = timeSectionValue
      this.$axios.post('/tw-cloud-datatheme-server/themedata/app_sy_xssltj',quary).then(res=>{
        let {pageInfo, serverResult} = res.data
        if(serverResult.resultCode==='200'&&pageInfo.list.length>0){
          // 数据处理
          let chartDataMaps = [{
            dataKey: 'value',
            name: '学生数量'
          }]
          let dataset=[]
          let stuNumSum=0
          pageInfo.list.forEach(el=>{
            if(el.jyjb!=='总计'){
              stuNumSum+=el.xssl
              dataset.push({
                name:el.jyjb,
                value:el.xssl
              })
            }
          })
          this.stuNumSum=stuNumSum
          this.baroption4.dataset = dataset
          this.baroption4.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'pie',
              radius: [0, 60],
              center: ['50%', '50%'],
              avoidLabelOverlap: true,
              roseType: 'radius',
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 16
                  },
                  formatter: '{b}\n{c}',
                  alignTo: 'none'
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              }
            }
          })
        }
      })
    },



    // 专任教师
    baroption5Init () {
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = [{ 'fieldName': 'tjnf', 'fieldValues': [this.tjnf], 'operator': 'IN', 'prepender': 'AND' }]
      quary.conditions = timeSectionValue
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_sy_zrjssltj`,quary).then(res=>{
        let {pageInfo, serverResult} = res.data
        if(serverResult.resultCode==='200'&&pageInfo.list.length>0){
          // 数据处理
          let dataset=[]
          let teaNumSum=0
          let chartDataMaps = [{
            dataKey: 'value',
            name: '教师数量'
          }]
          pageInfo.list.forEach(el=>{
            if(el.jyjb!=='总计'){
              teaNumSum+=el.jssl
              if(el.jyjb==='幼儿园'){
                dataset[0]={
                  name:el.jyjb,
                  value:el.jssl
                }
              }else if(el.jyjb==='小学'){
                dataset[1]={
                  name:el.jyjb,
                  value:el.jssl
                }
              }else if(el.jyjb==='初中'){
                dataset[2]={
                  name:el.jyjb,
                  value:el.jssl
                }
              }else if(el.jyjb==='高中'){
                dataset[3]={
                  name:el.jyjb,
                  value:el.jssl
                }
              }
              // dataset.push({
              //   name:el.jyjb,
              //   value:el.jssl
              // })
            }
          })
          this.teaNumSum=teaNumSum
          this.baroption5.dataset = dataset
          this.baroption5.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'pie',
              radius: [40, 60],
              center: ['50%', '50%'],
              avoidLabelOverlap: true,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 16
                  },
                  formatter: '{b}\n{c}',
                  alignTo: 'none'
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              }
            }
          })
        }
      })

    },



    // 生师比
    baroption6Init () {
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = [{ 'fieldName': 'tjnf', 'fieldValues': [this.tjnf], 'operator': 'IN', 'prepender': 'AND' }]
      quary.conditions = timeSectionValue
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_sy_ssbtj`,quary).then(res=>{
        let {pageInfo, serverResult} = res.data
        if(serverResult.resultCode==='200'&&pageInfo.list.length>0){
          // 图表处理
          let toolTip = this.baroption6.chartOption.tooltip
          let xAxis = this.baroption6.chartOption.xAxis
          let yAxis = this.baroption6.chartOption.yAxis
          let legend = this.baroption6.chartOption.legend // 控制 图例的显示
          legend.show = false
          yAxis[0].type = 'value'
          xAxis.axisLabel = {
            fontSize: 14,
            interval: 0,
            rotate: 0
          }
          toolTip.formatter = function (datas) {
            var res = datas.marker + datas.name + datas.value + ': 1'
            return res
          }

          // 数据处理
          let dataSet=[{
            name:'幼儿园',
            value:0
          },{
            name:'小学',
            value:0
          },{
            name:'初中',
            value:0
          },{
            name:'高中',
            value:0
          }]
          let chartDataMaps = [
            {
              'name': '生师比',
              'dataKey': 'value'
          }]
          pageInfo.list.forEach(el=>{
            dataSet.forEach(item=>{
              if(el.jyjb===item.name){
                item.value=el.xsbl
              }
            })
          })
          this.baroption6.dataset = dataSet
          this.baroption6.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              },
              barMaxWidth: 22,
              label: {
                show: false,
                fontSize: 16,
                position: 'top'
              }
            }
          })
        }
      })

    },

  },

}
</script>

<style scoped>
  .typeImgBox{
    float: left;
    width: 35%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>
